<script setup>
import { ref, onMounted, defineProps, toRefs } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  photoKey: String,
});
const { photoKey } = toRefs(props);

onMounted(async () => {});

const photoMap = ref({
  pyq: {
    title: t("circleFriends"),
    list: [
      { id: 1, folder: "gzpyq", url: "gzpyq1" },
      { id: 2, folder: "gzpyq", url: "gzpyq2" },
      { id: 3, folder: "gzpyq", url: "gzpyq3" },
      { id: 4, folder: "gzpyq", url: "gzpyq4" },
      { id: 5, folder: "gzpyq", url: "gzpyq5" },
      { id: 6, folder: "gzpyq", url: "gzpyq6" },
      { id: 7, folder: "gzpyq", url: "gzpyq7" },
      { id: 8, folder: "gzpyq", url: "gzpyq8" },
      { id: 9, folder: "gzpyq", url: "gzpyq9" },
      { id: 10, folder: "gzpyq", url: "gzpyq10" },
      { id: 11, folder: "gzpyq", url: "gzpyq11" },
      { id: 12, folder: "gzpyq", url: "gzpyq12" },
      { id: 13, folder: "gzpyq", url: "gzpyq13" },
    ],
  },
  "3n": {
    title: t("3N"),
    list: [
      { id: 1, folder: "tingshen3n", url: "tingshen1" },
      { id: 2, folder: "tingshen3n", url: "tingshen2" },
      { id: 3, folder: "tingshen3n", url: "tingshen3" },
      { id: 4, folder: "tingshen3n", url: "tingshen4" },
      { id: 5, folder: "tingshen3n", url: "tingshen5" },
      { id: 6, folder: "tingshen3n", url: "tingshen6" },
      { id: 7, folder: "tingshen3n", url: "tingshen7" },
      { id: 8, folder: "tingshen3n", url: "tingshen8" },
      { id: 9, folder: "tingshen3n", url: "tingshen9" },
      { id: 10, folder: "tingshen3n", url: "tingshen10" },
      { id: 11, folder: "tingshen3n", url: "tingshen11" },
      { id: 12, folder: "tingshen3n", url: "tingshen12" },
      { id: 13, folder: "tingshen3n", url: "tingshen13" },
      { id: 14, folder: "tingshen3n", url: "tingshen14" },
      { id: 15, folder: "tingshen3n", url: "tingshen15" },
      { id: 16, folder: "tingshen3n", url: "tingshen16" },
      { id: 17, folder: "tingshen3n", url: "tingshen17" },
    ],
  },
});

const getAssetsFile = (folder, url) => {
  return new URL(`/public/img/${folder}/${url}.jpg`, import.meta.url).href;
};
</script>

<template>
  <div class="photoDisplay">
    <div class="outBox">
      <el-carousel
        class="carousel"
        trigger="click"
        height="500px"
        indicator-position="none"
      >
        <el-carousel-item
          v-for="(item, index) in photoMap[props.photoKey].list"
          :key="index"
        >
          <img
            class="carouselImg"
            :src="getAssetsFile(item.folder, item.url)"
            alt=""
          />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style lang="less" scoped>
.photoDisplay {
  color: #fff;
  display: flex;
  align-items: center;
  .outBox {
    width: 800px;
    height: 500px;
    padding: 26px 16px 16px 16px;
    // margin: auto;
    background: url("/public/img/exhibition-bg.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;
    .carousel {
      .carouselImg {
        width: 800px;
        height: 500px;
      }
    }
  }
}
</style>
